<script setup>
import { ref } from 'vue'
import AddTask from '@/views/node/components/AddTask.vue'
import { GetLoadService, GetNodeByName } from '@/api/node.js'
import { useUserStore } from '@/stores/modules/user'
const useStore = useUserStore()

const onSuccess = () => {
  console.log('添加成功')
}
// const nodeId = router.query.node_id // 获取传递的 node_id

const dialog = ref()
const load = ref({
  cpu: '',
  gpu: '',
  men: '',
  status: ''
})
// 获取节点状态 、系统负载
const getName = async (name) => {
  const res = await GetLoadService(name)
  load.value = res.data.data
  console.log(res)
}

// 拉取选择的节点信息
const nodeInfo = ref('')
const initNode = async () => {
  const {
    data: { data }
  } = await GetNodeByName(useStore.getNodeName())
  nodeInfo.value = data

  getName(nodeInfo.value.name)
  // name.value = useStore.getNodeInfo().name
  // getName()
}
initNode()
</script>

<template>
  <div>
    <el-card class="page-container" title="">
      <template #header>
        <div class="header">
          <div class="flex-auto">
            <div style="margin: 10px 0; display: flex; align-items: center">
              <ul
                style="
                  list-style-type: none;
                  padding: 0;
                  margin: 0;
                  display: flex;
                "
              >
                <li
                  style="
                    background: linear-gradient(37deg, #f7931b 0%, #f7c419 100%),
                      #f7c21a;
                  "
                >
                  <div class="param-name">#节点状态</div>
                  <!-- <div class="param">/running/error</div> -->
                  <div class="param">{{ load.status }}</div>
                </li>
                <li
                  style="
                    background: linear-gradient(37deg, #a4a8f1 0%, #8bc9f2 100%),
                      #ef7878;
                  "
                >
                  <div class="param-name">#系统负载</div>
                  <!-- <div class="param">cpu/men/gpu</div> -->
                  <div class="param">
                    {{ load.cpu }}/{{ load.men }}/{{ load.gpu }}
                  </div>
                </li>
                <li
                  style="
                    background: linear-gradient(37deg, #8bc9f2 0%, #00aae5 100%),
                      #425be0;
                  "
                >
                  <div class="param-name">#计算指标参数</div>
                  <div class="param">延迟/错误率</div>
                </li>
              </ul>
            </div>
          </div>

          <div class="extra">
            <slot name="extra"></slot>
          </div>
        </div>
      </template>
      <slot></slot>
    </el-card>

    <!-- 弹窗组件，确保 ref 和事件处理器正确绑定 -->
    <add-task ref="dialog" @success="onSuccess"></add-task>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  // box-sizing: border-box;
  // outline: none;
  --el-card-border-color: rgb(27, 31, 56);
  color: #fff;
  background-color: #1b1f38;
  border: #1b1f38;
  border-radius: 0%;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ul li {
      width: 273px;
      height: 123px;
      list-style: none;
      padding: 0px;
      margin-right: 30px;
      font-size: 16px;
      color: #fff;
      border-radius: 3px;
      div {
        padding-left: 20px;
      }
    }
  }
}
.param-name {
  margin-bottom: 30px;
  margin-top: 20px;
}
.add-task {
  width: 273px;
  height: 123px;
  text-align: center;
  line-height: 123px;
  color: #727070;
  border-radius: 3px;
  border: #727070 solid 1px;
  cursor: pointer;
  &:hover {
    border-color: #fff;
    color: #fff;
  }
}
</style>
